<html>
<head>
    <title>权限分页列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb">
          <a href="/home">首页</a>
          <a href="/power">权限管理</a>
          <a><cite>权限分页</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="search">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="powerName" id="powerName" placeholder="权限名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                            <button class="layui-btn" type="reset">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="table">
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="optTemp">
    <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</script>
<script type="text/html" id="addBtn">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</script>
<script>
    var table;
    layui.use(['table', 'form'], function () {
        table = layui.table;
        const form = layui.form;
        table.render({
            elem: "#dataTable",
            url: 'power/page',
            page: true,
            toolbar: "#addBtn",
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {checkbox: true},
                {field: "id", title: "编号"},
                {field: "powerName", title: "权限名"},
                {field: "profile", title: "介绍"},
                {title: "操作", toolbar: "#optTemp", fixed: "right"}
            ]]
        });
        form.on("submit(search)", function (data) {
            data.field.params = "page";
            table.reload('dataTable', {
                where: data.field
            })
            return false;
        });
        table.on("toolbar(dataTable)", function (data) {
            const event = data.event;
            switch (event) {
                case "add":
                    layer.open({
                        type: 2,
                        content: "power/edit",
                        maxmin: true,
                        area: ['500px', '500px']
                    })
                    break;
                default:
                    layer.alert("点击异常", {icon: 5});
                    break;
            }
        });
        table.on("tool(dataTable)", function (data) {
            const event = data.event;
            switch (event) {
                case "update":
                    layer.open({
                        type: 2,
                        content: "power/edit?id=" + data.data.id,
                        maxmin: true,
                        area: ['500px', '500px']
                    })
                    break;
                case "delete":
                    if (data.data.id === 1) {
                        layer.alert("管理员禁止删除！", {icon: 5})
                    } else {
                        layer.confirm('确定删除编号[' + data.data.id + ']的数据吗?', {icon: 3}, function (index) {
                            $.ajax({
                                url: "power/delete/" + data.data.id,
                                method: "delete",
                                dataType: "json",
                                success(res) {
                                    if (res.code === 200) {
                                        layer.msg("删除成功！", {icon: 6})
                                        table.reload("dataTable")
                                    } else {
                                        layer.alert(res.msg, {icon: 5})
                                    }
                                },
                                error(e) {
                                    layer.alert('服务器断开连接...', {icon: 5})
                                    console.log(e)
                                }
                            });
                            layer.close(index);
                        })
                    }
                    break;
                default:
                    layer.alert("点击异常", {icon: 5});
                    break;
            }
        })
    });
</script>
</html>
